<template>
  <div>
    <vxe-grid v-bind="grid" ref="xGrid">
      <template #toolbar_buttons>
        <eip-toolbar
          @del="del"
          @update="update"
          @add="add"
          @copy="copy"
          @designer="designerConfig"
          @onload="toolbarOnload"
        ></eip-toolbar
      ></template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
      <template #checkboxHeader="{ checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleAllCheckboxRow()">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
      <template #checkbox="{ row, checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
      <template #name="{ row }">
        {{ row.name }}
        <a-tag v-if="row.isAgile > 0" color="red"> 敏 </a-tag>
      </template>
      <template #thumbnail="{ row }">
        <img
          v-if="row.thumbnail"
          style="width: 32px; height: 32px"
          :src="row.thumbnail"
        />
      </template>
      <template #icon="{ row }">
        <a-icon v-if="row.icon" :type="row.icon" :theme="row.theme" />
      </template>
      <template #image="{ row }">
        <a-avatar shape="square" v-if="row.image" :src="row.image" />
      </template>
      <template #showLibrary="{ row }">
        <a-switch :checked="row.showLibrary" />
      </template>
      <template #isFreeze="{ row }">
        <a-switch :checked="row.isFreeze" @change="isFreezeChange(row)" />
      </template>
      <template #operate="{ row }">
        <a-tooltip
          @click="tableUpdateRow(row)"
          title="编辑"
          v-if="visible.update"
        >
          <label class="text-eip eip-cursor-pointer">编辑</label>
        </a-tooltip>
        <a-divider type="vertical" v-if="visible.update" />
        <a-tooltip title="删除" v-if="visible.del" @click="tableDelRow(row)">
          <label class="text-red eip-cursor-pointer">删除</label>
        </a-tooltip>
      </template>
    </vxe-grid>
    <edit
      ref="edit"
      v-if="edit.visible"
      :visible.sync="edit.visible"
      :data="edit.data"
      :title="edit.title"
      :copy="edit.copy"
      :processId="edit.processId"
      @ok="operateStatus"
    ></edit>

    <designer
      ref="designer"
      v-if="designer.visible"
      :title="designer.title"
      :processId="designer.processId"
      :visible.sync="designer.visible"
      @save="tableInit"
    ></designer>
  </div>
</template>

<script>
import { query, del } from "@/services/workflow/process/list";
import edit from "./edit";
import designer from "./designer";
import { selectTableRow, deleteConfirm } from "@/utils/util";
export default {
  data() {
    return {
      grid: {
        id: "workflowProcess",
        loading: true,
        height: this.eipTableHeight(),
        pagerConfig: {},
        printConfig: {},
        exportConfig: {},
        filterConfig: {
          remote: true,
        },
        sortConfig: {
          trigger: "cell",
          defaultSort: { field: "createTime", order: "desc" },
          orders: ["desc", "asc", null],
          remote: true,
          multiple: true,
          chronological: true,
        },
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        columns: [
          {
            type: "checkbox",
            width: 50,
            slots: {
              checkbox: "checkbox",
              header: "checkboxHeader",
            },
            fixed: "left",
            align: "center",
          },
          { type: "seq", width: 60, fixed: "left" },
          {
            field: "name",
            title: "名称",
            width: 220,
            sortable: true,
            showOverflow: "ellipsis",
            slots: {
              default: "name",
            },
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },

          {
            field: "shortName",
            title: "简称",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "thumbnail",
            title: "流程图",
            width: 120,
            sortable: true,
            showOverflow: "ellipsis",
            slots: {
              default: "thumbnail",
            },
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "image",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "icon",
            title: "图标",
            width: 120,
            sortable: true,
            showOverflow: "ellipsis",
            slots: {
              default: "icon",
            },
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "image",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "image",
            title: "图片",
            width: 120,
            sortable: true,
            showOverflow: "ellipsis",
            slots: {
              default: "image",
            },
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "image",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },

          {
            field: "typeName",
            title: "类别",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },

          {
            field: "version",
            title: "版本号",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "showLibrary",
            title: "流程库显示",
            width: 140,
            sortable: true,
            showOverflow: true,
            slots: {
              default: "showLibrary",
            },
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "switch",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [
                    {
                      value: 1,
                      label: "已禁用",
                      checked: false,
                      color: "red",
                    },
                    {
                      value: 0,
                      label: "未禁用",
                      checked: false,
                      color: "#1890ff",
                    },
                  ],
                },
              },
            ],
          },
          {
            field: "isFreeze",
            title: "禁用",
            width: 120,
            sortable: true,
            showOverflow: true,
            slots: {
              default: "isFreeze",
            },
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "switch",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [
                    {
                      value: 1,
                      label: "已禁用",
                      checked: false,
                      color: "red",
                    },
                    {
                      value: 0,
                      label: "未禁用",
                      checked: false,
                      color: "#1890ff",
                    },
                  ],
                },
              },
            ],
          },
          {
            field: "orderNo",
            title: "排序号",
            width: 120,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "number",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "remark",
            title: "备注",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createUserName",
            title: "创建人",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createTime",
            title: "创建时间",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "updateUserName",
            title: "修改人",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "updateTime",
            title: "修改时间",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            title: "操作",
            width: 100,
            align: "center",
            fixed: "right",
            slots: {
              default: "operate",
            },
          },
        ],

        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          props: {
            result: "data", // 配置响应结果列表字段
            total: "total", // 配置响应结果总页数字段
          },
          ajax: {
            query: ({ page, sorts, filters }) => {
              return new Promise((resolve) => {
                const firstSort = sorts[0];
                query({
                  filters: this.eipTableFilter(filters),
                  current: page.currentPage,
                  size: page.pageSize,
                  sort: this.eipGridSort(sorts),
                }).then((result) => {
                  if (result.code == this.eipResultCode.success) {
                    resolve(result);
                  }
                  this.grid.loading = false;
                });
              });
            },
          },
        },
      },
      visible: {
        update: true,
        del: true,
        designer: true,
      },
      edit: {
        visible: false,
        processId: "",
        copy: false,
        title: "",
      },

      designer: {
        visible: false,
        processId: "",
        title: "",
        bodyStyle: {
          padding: "1px",
          "padding-bottom": "4px",
        },
      },
    };
  },
  components: { edit, designer },

  methods: {
    /**
     *
     */
    designerClose() {
      this.designer.visible = false;
    },

    /**
     * 设计
     */
    tableDesignerRow(row) {
      let that = this;
      that.designer.processId = row.processId;
      that.designer.title = "流程配置:" + row.name + " " + row.version;
      that.designer.visible = true;
    },

    //初始化流程数据
    tableInit() {
      this.$refs.xGrid.commitProxy("query");
    },

    /**
     * 树更新
     */
    tableUpdateRow(row) {
      this.edit.processId = row.processId;
      this.edit.title = "流程配置-" + row.name;
      this.edit.visible = true;
    },
    /**
     * 删除
     */
    tableDelRow(row) {
      let that = this;
      deleteConfirm(
        "流程配置【" + row.name + "】" + that.eipMsg.delete,
        function () {
          that.$loading.show({ text: that.eipMsg.delloading });
          del({ id: row.processId }).then((result) => {
            that.$loading.hide();
            if (result.code == that.eipResultCode.success) {
              that.tableInit();
              that.$message.success(result.msg);
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        that
      );
    },

    /**
     * 新增
     */
    add() {
      this.edit.copy = false;
      this.edit.processId = null;
      this.edit.title = "新增流程配置";
      this.edit.visible = true;
    },

    /**
     * 修改
     */
    update() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (row) {
          that.edit.copy = false;
          that.edit.processId = row.processId;
          that.edit.title = "流程配置-" + row.name;
          that.edit.visible = true;
        },
        that
      );
    },
    /**
     * 复制
     */
    copy() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (row) {
          that.edit.processId = row.processId;
          that.edit.copy = true;
          that.edit.title = "复制流程配置-" + row.name;
          that.edit.visible = true;
        },
        that
      );
    },
    /**
     * 预览
     */
    preview() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (row) {
          that.edit.processId = row.processId;
          that.edit.title = "流程预览-" + row.name;
          that.edit.visible = true;
        },
        that
      );
    },

    /**
     * 删除
     */
    del() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (rows) {
          //判断是否具有敏捷开发
          var isAgile = rows.filter((f) => f.isAgile > 0).length > 0;
          if (isAgile) {
            that.$message.error("选择数据具有敏捷开发流程,请取消后重试");
          } else {
            //提示是否删除
            deleteConfirm(
              that.eipMsg.delete,
              function () {
                //加载提示
                that.$loading.show({ text: that.eipMsg.delloading });
                let ids = that.$utils.map(rows, (item) => item.processId);
                del({ id: ids.join(",") }).then((result) => {
                  that.$loading.hide();
                  if (result.code == that.eipResultCode.success) {
                    that.tableInit();
                    that.$message.success(result.msg);
                  } else {
                    that.$message.error(result.msg);
                  }
                });
              },
              that
            );
          }
        },
        that,
        false
      );
    },
    /**
     * 设计
     */
    designerConfig() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (row) {
          that.designer.processId = row.processId;
          that.designer.title = row.name;
          that.designer.visible = true;
        },
        that
      );
    },

    /**
     * 编辑关闭
     */
    designerCancel() {
      this.designer.visible = false;
    },

    //提示状态信息
    operateStatus(result) {
      if (result.code === this.eipResultCode.success) {
        this.tableInit();
      }
    },

    /**
     * 权限加载完毕
     */
    toolbarOnload(buttons) {
      this.visible.designer =
        buttons.filter((f) => f.method == "designer").length > 0;
      this.visible.update =
        buttons.filter((f) => f.method == "update").length > 0;
      this.visible.del = buttons.filter((f) => f.method == "del").length > 0;
    },
  },
};
</script>
